<template>
  <div class="strategy-container">
    <!-- 标题区域 -->
    <div class="section-header">
      <h1 class="main-title">
        <el-icon class="icon-style">
          <Collection />
        </el-icon>我的收藏 · 心仪目的地
      </h1>
      <div class="sub-title">珍藏每一份旅途心动</div>
    </div>

    <!-- 收藏列表 -->
    <div class="card-grid">
      <el-card
        v-for="(item, index) in Data"
        :key="index"
        class="strategy-card"
        shadow="never"
        :hover-shadow="true"
        @mouseenter="handleCardEnter(index)"
        @mouseleave="handleCardLeave(index)"
        @click="handleCardClick(item.id)"
      >
        <!-- 封面图 -->
        <div class="cover-wrapper">
          <el-image
            :src="item.coverImg"
            fit="cover"
            class="cover-image"
            :preview-src-list="[item.coverImg]"
            lazy
          >
            <template #loading>
              <div class="image-placeholder"></div>
            </template>
            <template #error>
              <div class="image-error">
                <el-icon class="error-icon">
                  <Picture />
                </el-icon>
              </div>
            </template>
          </el-image>
        </div>

        <!-- 内容区域 -->
        <div class="card-content">
          <div class="title-wrapper">
            <el-icon class="star-icon">
              <StarFilled />
            </el-icon>
            <h2 class="card-title ellipsis">{{ item.title || '未命名收藏' }}</h2>
          </div>

          <div class="content-preview ellipsis" v-html="stripHtml(item.content)"></div>

          <!-- 元信息 -->
          <div class="meta-info">
            <el-tag type="danger" size="small" class="meta-tag">
              <el-icon class="meta-icon">
                <View />
              </el-icon>
              {{ item.viewCount || 0 }}次浏览
            </el-tag>
            <el-tag type="warning" size="small" class="meta-tag">
              <el-icon class="meta-icon">
                <Star />
              </el-icon>
              {{ item.likeCount || 0 }}人喜欢
            </el-tag>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 空状态 -->
    <div v-if="!loading && Data.length === 0" class="empty-wrapper">
      <div class="empty-content">
        <el-icon class="empty-icon">
          <FolderDelete />
        </el-icon>
        <p class="empty-text">
          <span class="highlight">尚未收藏任何攻略</span>，
          <br />快去发现精彩内容吧~
        </p>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-wrapper">
      <div class="loading-content">
        <el-icon class="loading-icon">
          <Loading />
        </el-icon>
        <span>正在加载心仪收藏...</span>
      </div>
    </div>
  </div>
</template>
  
  <script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import {
  Collection,
  Picture,
  Loading,
  StarFilled,
  Star,
  FolderDelete
} from "@element-plus/icons-vue";
import { likeService } from "@/api/like";

const router = useRouter();
const Data = ref([]);
const loading = ref(true);
const cardAnimate = ref([]);

const handleCardClick = id => {
  router.push(`/user/show/${id}`);
};

const handleCardEnter = index => {
  cardAnimate.value[index] = true;
};

const handleCardLeave = index => {
  cardAnimate.value[index] = false;
};

const stripHtml = html => {
  return html?.replace(/<[^>]+>/g, "") || "";
};

const fetchData = async () => {
  try {
    const res = await likeService();
    Data.value = res.data || [];
    cardAnimate.value = new Array(Data.value.length).fill(false);
  } catch (error) {
    console.error("加载失败:", error);
    ElMessage.error("获取收藏列表失败");
  } finally {
    loading.value = false;
  }
};

fetchData();
</script>
  
  <style scoped>
/* 全局样式优化 */
.strategy-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 30px;
  background: #f5f7fa;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
  border-bottom: 1px solid #ebedf0;
  padding-bottom: 25px;
}

.main-title {
  font-size: 2.2rem;
  color: #2d3748;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}

.sub-title {
  font-size: 1.1rem;
  color: #718096;
  font-weight: 300;
}

.icon-style {
  font-size: 2.4rem;
  color: #e53e3e;
  transform: rotate(-15deg);
  transition: color 0.3s;

  &:hover {
    color: #c53030;
  }
}

/* 卡片样式优化 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 35px;
  padding: 20px 0;
}

.strategy-card {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);

  &:hover {
    box-shadow: 0 8px 24px rgba(229, 62, 62, 0.15);
    transform: translateY(-8px);
  }
}

.cover-wrapper {
  height: 240px;
  position: relative;
  overflow: hidden;
}

.cover-image {
  width: 100%;
  height: 100%;
  transition: transform 0.5s;

  &:hover {
    transform: scale(1.05);
  }
}

.image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ebf4ff, #f3f4f6);
}

.image-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f5f7fa;

  .error-icon {
    font-size: 50px;
    color: #d1d5db;
  }
}

.card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.star-icon {
  color: #facc15;
  font-size: 1.2rem;
}

.card-title {
  font-size: 1.3rem;
  color: #1a365d;
  margin: 0;
  flex-grow: 1;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.content-preview {
  color: #4a5568;
  line-height: 1.6;
  -webkit-line-clamp: 3;
}

.meta-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: #718096;
}

.meta-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 500;

  .meta-icon {
    font-size: 14px;
  }
}

.el-tag--danger {
  background-color: #fef2f2;
  color: #e53e3e;
  border-color: #fed7d7;
}

.el-tag--warning {
  background-color: #fff7eb;
  color: #d97706;
  border-color: #ffedc6;
}

/* 加载状态 */
.loading-wrapper {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.loading-icon {
  font-size: 50px;
  color: #e53e3e;
  animation: spin 1.2s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 空状态 */
.empty-wrapper {
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  color: #4a5568;
}

.empty-icon {
  font-size: 80px;
  color: #d1d5db;
  opacity: 0.8;
  transition: transform 0.3s;

  &:hover {
    transform: scale(1.1);
  }
}

.empty-text {
  font-size: 1.2rem;
  text-align: center;

  .highlight {
    color: #e53e3e;
    font-weight: 600;
  }
}

/* 响应式优化 */
@media (max-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .main-title {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .section-header {
    margin-bottom: 40px;
  }

  .cover-wrapper {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .strategy-container {
    padding: 20px 15px;
  }

  .main-title {
    font-size: 1.4rem;
    gap: 10px;
  }

  .icon-style {
    font-size: 1.8rem;
  }
}
</style>